<template>
  <div class="center">
    <div v-if="data.length">
    <div class="item" v-for="(item,i) in data" :key="item.id">
      <img :src="item.avatar" alt="" @click="$router.push('/UserFeil/followList?id='+item.id),$router.go(0)">
      <div @click="$router.push('/UserFeil/followList?id='+item.id),$router.go(0)">
        <p>{{item.nickname}}</p>
        <p>{{item.leaveMessage}}</p>     
      </div>
      <button class="btn" v-if="!item.followState" @click="guanzhu(item.id,i)">关注</button>
      <button class="btn y" v-else @click="falseZhu(item.id,i)">已关注</button>
    </div>
    <div class="more">
      <span>没有更多数据了</span>
      </div>
    </div>
    <div v-else class="false">
      <img src="@/assets/NotFound.png" alt="">
      <p>暂时没有关注哟</p>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        data: [],
        gzw:0
      }
    },
    mounted(){
      let id = this.$route.query.id
      this.axios('/user/followList?id='+id).then(res=>{
        this.data.push(...res.data.data)
        console.log(this.data)
      })
    },
    methods: {
      guanzhu(n,i) {
        let params = new URLSearchParams()
        params.append('follow',n)
        params.append('id',this.$store.state.LoginState[0].id)
        this.axios.post('/user/follow',params).then(res=>{
          if(res.data.code=200){
            this.data[i].followState =!this.data[i].followState
          }
        })
      },
       falseZhu(n,i){
        let params = new URLSearchParams()
        params.append('follow',n)
        params.append('user',this.$store.state.LoginState[0].id)
        this.axios.post('/user/defollow',params).then(res=>{
          if(res.data.code==200){
            this.data[i].followState =!this.data[i].followState
          }
        })
    }
    },
   
  }
</script>

<style scoped>
.item{
  padding: 10px 30px;
  width: 100%;
  display: flex;
  /* justify-content: space-between; */
  align-items: center;
  position: relative;
  border-bottom: 1px solid #f0f0f0;
  padding: 10px;
  position: relative;
}
.item img{
  width: 50px;
  border-radius: 100%;
  margin-right: 16px;
}
.item p{
  font-size: 15px;
}
.item p:nth-child(1):hover{
  color: #00b2ff;
}
.item p:nth-child(2){
  color: #999;
}
.btn{
  right: 0;
  position: absolute;
  background-color: #fff;
  color: #00b2ff;
  border: 1px solid #00c3ff;
  border-radius: 4px;
  padding: 6px 14px;
  height: 30px;
  position: absolute;
  right: 6%;
  /* margin-right: 10px; */
}
.y{
  background: #999;
  color: #fff;
  border-color:#fff ;
}
.more{
  text-align: center;
  margin-top: 20px;
}
.more span{
  padding: 10px;
  /* background: #4cc3ff; */
  color: #999;
  border-radius:8px;
}
.false{
  padding: 20px;
  text-align: center;
  color: #999;
  font-size: 14px;
}
.false img{
  width: 30%;
  margin-bottom: 10px;
}
</style>